import React, { ReactNode, useState, useRef } from 'react';
import { bindActionCreators, Dispatch } from 'redux';
import { connect } from 'react-redux';
import { Layout } from 'antd';
import { History } from 'history';

const { Content } = Layout;
import Mysider from '../components/Sider/index'
import Tty from '../containers/ttyPage'
import BlockPage from '../containers/BlockPage'
import Block from '../components/Block'
import { spawn, ChildProcessWithoutNullStreams } from 'child_process'
import { svgchange } from './methed'
import Mymodel from '../components/Mymodel'
import Resources from '../containers/ResourcesPage'
import tmpfile from '../utils/tmpfile'
import { pythonname } from '../utils/local';
import { addValue } from '../store/actions/ttyactions';


type Props = {
  children: ReactNode;
  history: History;
  addValue: (dispatch: Dispatch) => void
  dispatch: Dispatch
};



function App(props: Props) {
  const [fontSize, setFontSize] = useState(14)
  const [fileState, setfileState] = useState(false)
  const [filename, setFilename] = useState('')
  const [ls, Setls] = useState<ChildProcessWithoutNullStreams | null>(null)
  const b = useRef<Block>(null)

  window.addEventListener('beforeunload', () => {
    ls?.kill('SIGHUP')
  })

  function getworkspace() {
    const x = b.current
    return x?.state.workspace
  }
  function codeChange(t: boolean) {
    if (t) {
      const data = fontSize < 48 ? fontSize + 2 : fontSize
      setFontSize(data)
    } else {
      const data = fontSize > 10 ? fontSize - 2 : fontSize
      setFontSize(data)
    }
  }

  function pythonvalues() {
    const x = b.current as Block | null
    let values = x?.state.value || ''
    return values
  }

  async function run() {
    const x = b.current as Block | null
    let values = x?.state.value || ''
    let name = ''
    // if (!name) {

    // } else {
    //   name = path.join(save_python, `${name}.py`)
    // }
    if (filename) {
      name = await tmpfile(values, filename)
    } else {
      name = await tmpfile(values, filename)
      setFilename(name)
    }
    if (ls) {
      ls.kill()
    }
    const python = await pythonname()
    console.log(python)
    const z = spawn(python, ["-u", name])

    Setls(z)
    z.stdout.on('data', props.addValue);

    z.stderr.on('data', props.addValue);

    z.on('error', props.addValue)

    z.on('close', (code) => {
      console.log(`子进程退出，退出码 ${code}`);
      Setls(null)
    });
  }

  const { children } = props;
  return <Layout className="main">
    <Mysider ls={ls} coderun={run} codechange={codeChange} svgchange={svgchange} fileState={fileState} setfileState={setfileState} workspace={getworkspace} pythonvalues={pythonvalues} >
    </Mysider>
    <Content className="position-relative">
      <BlockPage ref={b} fontSize={fontSize}></BlockPage>
      <Tty ls={ls}  ></Tty>
    </Content>
    <Mymodel title="资源管理" show={fileState} setShow={setfileState} >
      <Resources></Resources>
    </Mymodel>
    {children}
  </Layout>;
}

function mapDispatchToProps(dispatch: Dispatch,) {
  return bindActionCreators(
    {
      addValue,
    },
    dispatch
  );
}



export default connect(null, mapDispatchToProps)(App);